<div ng-controller="Jmx.ChartEditController">
  <form>
    <fieldset>
      <div class="control-group" ng-show="canEditChart()">
        <input type="submit" class="btn" value="View Chart" ng-click="viewChart()"
               ng-disabled="!selectedAttributes.length && !selectedMBeans.length"/>
      </div>
      <div class="control-group">
        <table class="table">
          <thead>
          <tr>
            <th ng-show="showAttributes()">Attributes</th>
            <th ng-show="showElements()">Elements</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td ng-show="showAttributes()">
              <select id="attributes" size="20" multiple ng-multiple="true" ng-model="selectedAttributes"
                      ng-options="name | humanize for (name, value) in metrics"></select>
            </td>
            <td ng-show="showElements()">
              <select id="mbeans" size="20" multiple ng-multiple="true" ng-model="selectedMBeans"
                      ng-options="name for (name, value) in mbeans"></select>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="alert" ng-show="!canEditChart()">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>No numeric metrics available!</strong> Try select another item to chart on.
        </div>
      </div>
    </fieldset>
  </form>
</div>
